<template>
  <div style="height: 60px">
    <createHeader :isBorder="true" :isBack="true" @isback="FnBack">
      导入规格
    </createHeader>
  </div>
  <div style="height: calc(100% - 60px)">
    <el-form :model="formData" label-width="130px" label-position="left">
      <createCardColumn title="商品选择" style="margin-top: 10px">
        <template #default>
          <el-form-item label="请选择商品">
            <el-button type="primary" @click="FnSearchGoods"
              >搜索商品</el-button
            >
          </el-form-item>
          <el-form-item label="商品ID">{{ goods.goods_id }}</el-form-item>
          <el-form-item label="商品名称">{{ goods.goods_name }}</el-form-item>
        </template>
      </createCardColumn>
      <createCardColumn title="规格族与规格选择" style="margin-top: 10px">
        <template #default>
          <el-form-item label="请选择规格族">
            <el-button
              type="primary"
              @click="FnSearchCommodity"
              :disabled="!goods.goods_id"
              >搜索规格族</el-button
            >
          </el-form-item>
          <el-form-item label="规格族ID">{{
            specList[0]?.family_id
          }}</el-form-item>
          <el-form-item label="规格族名称">{{
            specList[0]?.family_cn
          }}</el-form-item>
          <el-form-item
            prop="family_en"
            label="规格族英文名称"
            :rules="[
              {
                required: true,
                message: '请输入规格族英文名称',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              style="width: 300px"
              placeholder="请输入规格族英文名称"
              v-model="formData.family_en"
            ></el-input>
          </el-form-item>
          <el-form-item label="CPU型号">{{
            specList[0]?.cpu_name
          }}</el-form-item>
          <el-form-item label="GPU型号">{{
            specList[0]?.gpu_show_type
          }}</el-form-item>
          <div>
            <el-table
              border
              :data="specList"
              style="margin-top: 20px; width: 500px"
            >
              <el-table-column prop="cpu" label="vCPU"> </el-table-column>
              <el-table-column prop="ram" label="内存"> </el-table-column>
              <el-table-column prop="gpu" label="GPU数量"> </el-table-column>
              <el-table-column
                prop="available_zone_name"
                label="可用区"
              ></el-table-column>
            </el-table>
          </div>
        </template>
      </createCardColumn>
    </el-form>

    <div class="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">导入</el-button>
    </div>
  </div>

  <!-- 商品选择 -->
  <GoodsChosen v-model="visible" v-model:goods="goods" />
  <!-- 规格选择 -->
  <SpecChosen v-model="visible2" v-model:specList="specList" />
</template>
<script setup>
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
import createHeader from '@/components/createHeader.vue';
import createCardColumn from '@/components/createCardColumn.vue';
import { ElMessage } from 'element-plus';
import GoodsService from '@/service/eks/goods';
const GoodsChosen = defineAsyncComponent(() => import('./components/GoodsChosen.vue'));
const SpecChosen = defineAsyncComponent(() => import('./components/SpecChosen.vue'));

const router = useRouter()


const FnBack = () => {
  router.push({ path: '/eks/goods/list' })
}

const formData = reactive({
  family_en: ''
})
const visible = ref(false);
const goods = ref({});
const FnSearchGoods = () => {
  visible.value = true;
}
const visible2 = ref(false);
const specList = ref([]);
const FnSearchCommodity = () => {
  visible2.value = true;
}
const cancel = () => {
  router.push({ path: '/eks/goods/list' })
}
const confirm = () => {
  if (!goods.value.goods_id) {
    ElMessage.error('请选择商品')
    return false
  }
  if (!specList.value.length) {
    ElMessage.error('请选择规格')
    return false
  }
  if (!formData.family_en) {
    ElMessage.error('请输入规格族英文名称')
    return false
  }

  GoodsService.createGoods({
    "goods_id": goods.value.goods_id,
    "family_cn": specList.value[0]?.family_cn,
    "family_en": formData.family_en,
    "family_id": specList.value[0]?.family_id,
    "category_id": specList.value[0]?.category_id,
    "spec_list": specList.value?.map(el => {
      return {
        "cpu": el?.cpu,
        "gpu": el?.gpu,
        "ram": el?.ram
      }
    })
  }).then((res) => {
    if (res.code === 'Success') {
      ElMessage.success('导入成功')
      router.push({ path: '/eks/goods/list' })
    }
  })
}
</script>
<style scoped lang="scss">
.footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-bottom: 40px;
}
</style>